<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>好客租房移动端</title>
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div style="width:200px;height:200px;background-color: #000;"></div>
  <!-- 网页的头部模块 -->
  <header class="header">
    <!-- 左右固定，中间自适应 -->
    <!-- 左边的城市 -->
    <div class="city">
      北京
    </div>

    <!-- 中间的搜索 -->
    <div class="search">
      <i class="iconfont icon-search"></i>
      <input type="search" placeholder="输入小区名词或商圈">
    </div>

    <!-- 右边的聊天 -->
    <div class="chat"></div>

  </header>

  <!-- 网页的轮播图模块 -->
  <div class="banner">
    <ul>
      <li>
        <a href="#">
          <img src="./upload/banner.png" alt="">
        </a>
      </li>
    </ul>

    <ol>
      <li class="active"></li>
      <li></li>
      <li></li>
    </ol>
  </div>

  <!-- 网页的整租合租模块 -->
  <div class="rentnav">
    <a href="#"><img src="./images/nav_1.png" alt=""></a>
    <a href="#"><img src="./images/nav_2.png" alt=""></a>
  </div>

  <!-- 网页的超级优惠模块 -->
  <div class="discount">
    <div class="discount_title">
      超值优惠
      <a href="#">
        <img src="./images/content_icon_next.png" alt="">
      </a>
    </div>

    <div class="discount_content">
      <div class="item">
        <img src="./upload/content_tu_home_left@2x.png" alt="">
        <div class="title">传智花园</div>
        <div class="size">静安区-2室1厅-90㎡</div>
        <div class="price">¥7800元/月</div>
      </div>
      <div class="item">
        <img src="./upload/content_tu_home_right@2x.png" alt="">
        <div class="title">汤臣一品</div>
        <div class="size">陆家嘴-2室2厅-110㎡</div>
        <div class="price">¥9500元/月</div>
      </div>
    </div>

    <div class="discount_ad">
      <img src="./upload/ggwei_home.png" alt="">
    </div>
  </div>

  <!-- 网页的推荐模块 -->
  <div class="recommend">
    <div class="recommend_title">
      为您推荐

      <div class="category">
        <a href="#" class="active">整租</a>
        <a href="#">合租</a>
      </div>
    </div>

    <div class="item">
      <div class="item_img">
        <img src="./upload/home_list_tu1@2x.png" alt="">
      </div>
      <div class="item_content">
        <h3>整租-汤臣一品6号院6号楼</h3>
        <p class="address">陆家嘴 | 2室2厅 | 110m²</p>
        <p class="route one-txt-cut">上海市浦东新区花园石桥路28弄1-8号,那套贼贵的房子就是。</p>
        <p class="condition">
          <span>多卫</span>
          <span>多阳台</span>
        </p>
        <p class="price"><strong>¥9500</strong> 元/月</p>
      </div>
    </div>

    <div class="item">
      <div class="item_img">
        <img src="./upload/home_list_tu2@2x.png" alt="">
      </div>
      <div class="item_content">
        <h3>整租-汤臣二品6号院6号楼</h3>
        <p class="address">陆家嘴 | 2室2厅 | 110m²</p>
        <p class="route one-txt-cut">上海市浦东新区花园石桥路28弄1-8号,那套贼贵的房子就是。</p>
        <p class="condition">
          <span>多卫</span>
          <span>多阳台</span>
        </p>
        <p class="price"><strong>¥9500</strong> 元/月</p>
      </div>
    </div>

    <div class="item">
      <div class="item_img">
        <img src="./upload/home_list_tu3@2x.png" alt="">
      </div>
      <div class="item_content">
        <h3>整租-汤臣三品6号院6号楼</h3>
        <p class="address">陆家嘴 | 2室2厅 | 110m²</p>
        <p class="route one-txt-cut">上海市浦东新区花园石桥路28弄1-8号,那套贼贵的房子就是。</p>
        <p class="condition">
          <span>多卫</span>
          <span>多阳台</span>
        </p>
        <p class="price"><strong>¥9500</strong> 元/月</p>
      </div>
    </div>

    <div class="item">
      <div class="item_img">
        <img src="./upload/home_list_tu4@2x.png" alt="">
      </div>
      <div class="item_content">
        <h3>整租-汤臣四品6号院6号楼</h3>
        <p class="address">陆家嘴 | 2室2厅 | 110m²</p>
        <p class="route one-txt-cut">上海市浦东新区花园石桥路28弄1-8号,那套贼贵的房子就是。</p>
        <p class="condition">
          <span>多卫</span>
          <span>多阳台</span>
        </p>
        <p class="price"><strong>¥9500</strong> 元/月</p>
      </div>
    </div>

    <div class="item">
      <div class="item_img">
        <img src="./upload/home_list_tu5@2x.png" alt="">
      </div>
      <div class="item_content">
        <h3>整租-汤臣五品6号院6号楼</h3>
        <p class="address">陆家嘴 | 2室2厅 | 110m²</p>
        <p class="route one-txt-cut">上海市浦东新区花园石桥路28弄1-8号,那套贼贵的房子就是。</p>
        <p class="condition">
          <span>多卫</span>
          <span>多阳台</span>
        </p>
        <p class="price"><strong>¥9500</strong> 元/月</p>
      </div>
    </div>

    <!-- 更多优质房源 -->
    <a class="more" href="#">
      查看更多优质房源
    </a>

    <!-- 品牌故事 -->
    <a class="story" href="#">
      <img src="./upload/gushirukou_home.png" alt="">
    </a>
  </div>

  <!-- 网页的底部模块 -->
  <footer class="footer">
    <ul>
      <li class="active">
        <a href="#">
          <img src="./images/footer_1.png" alt="">
          <p>首页</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/footer_2_default.png" alt="">
          <p>快速找房</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/footer_3_default.png" alt="">
          <p>委托代理</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/footer_4_default.png" alt="">
          <p>我的</p>
        </a>
      </li>
    </ul>
  </footer>
</body>

</html>